<template>
  <div class="pagination">
    <el-pagination
      prev-text="上一页"
      next-text="下一页"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="tableParams.pageNum"
      :page-sizes="[20, 30, 40]"
      :page-size="tableParams.pageSize"
      layout="total, sizes, slot, prev, pager, next"
      :total="tableParams.total">
      <button
        type="button"
        class="btn-prev"
        @click="jumpFirstPage"
        :disabled="isFirstPage">
        <span>首页</span>
      </button>
    </el-pagination>
 <!--   <el-pagination
      prev-text="上一页"
      next-text="下一页"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="tableParams.pageNum"
      :page-sizes="[20, 30, 40]"
      :page-size="tableParams.pageSize"
      layout="slot, jumper"
      :total="tableParams.total">
      <button
        type="button"
        class="btn-prev"
        @click="jumpLastPage"
        :disabled="isLastPage">
        <span>末页</span>
      </button>
    </el-pagination> -->
   <!-- <el-button
      type="primary"
      size="mini"
      class="ml">
      前往
    </el-button> -->
  </div>
</template>
<script>
export default {
  props: {
    tableParams: {
      type: Object,
    },
  },
  computed: {
    isFirstPage() {
      // 如果只有1页，禁用首页
      return this.tableParams.pageNum === 1;
    },
    isLastPage() {
      return (
        // 如果只有1页，禁用末页，或者已经处于末页，禁用
        Math.ceil(this.tableParams.total / this.tableParams.pageSize) === 0 ||
        this.tableParams.pageNum ===
          Math.ceil(this.tableParams.total / this.tableParams.pageSize)
      );
    },
  },
  methods: {
    handleSizeChange(val) {
      this.$emit('size-change', val);
    },
    handleCurrentChange(val) {
      this.$emit('current-change', val);
    },
    jumpFirstPage() {
      this.handleCurrentChange(1);
    },
    jumpLastPage() {
      this.handleCurrentChange(
        Math.ceil(this.tableParams.total / this.tableParams.pageSize)
      );
    },
  },
};
</script>
<style>
.pagination {
  padding: 6px;
  border-top: 0px;
  display: flex;
  justify-content: flex-start; /* 修改这里 */
  align-items: center;
  border-radius: 4px;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}
:deep(.el-button--mini) {
  padding: 5px 15px;
  height: 24.22px;
  margin-left: 10px;
}
</style>
